import { IFormProps, size } from "../../utils/common";
import React from "react";
import { connect } from "dva";
import { Form, Row, Col, Table, Button, Input, Select,Popconfirm } from 'antd';
import { PaginationProps } from "antd/lib/pagination";
const Styles = require("../../styles/index.less");
import * as api from '../../api/api';
import ArticlesEdit  from "../../components/articles/ArticlesEdit"
export interface IArticlesPros extends IFormProps {
    article: any
}
class Articles extends React.PureComponent<IArticlesPros, any>{
    constructor(props) {
        super(props);
        this.state = {}
    }

    componentDidMount() {
        this.getArticles();
    }
    search = () => {
        this.getArticles();
    }

    getArticles = (payload?) => {
        payload = Object.assign({}, this.props.article.articleSearchs, this.props.form.getFieldsValue(), { ...payload });
        this.props.dispatch({
            type: "article/getArticles",
            payload
        });
    }
    reset = () => {
        this.props.form.resetFields();
    }

    add = () => {
        this.edit();
    }

    edit = (article = {}) => {
        this.props.dispatch({
            type: "article/save",
            payload: { article }
        });
        this.setVisible(true);
    }

    save = (form) => {
        let { id } = this.props.article.article;
        form['id'] = id;
        this.props.dispatch({
            type: "article/saveArticles",
            payload: {
                form,
                callback: () => {
                    this.setVisible();
                    this.search();
                }
            }
        });
    }
    remove = (id) => {
        this.props.dispatch({
            type: "article/removeArticles",
            payload: {
                form: { id },
                callback: () => {
                    this.getArticles();
                }
            }
        })
    }
    setVisible = (visible = false) => {
        this.setState({ visible });
    }
    OnArticletChange = (articletType) => {
        let pageIndex = 1;
        let payload = Object.assign({}, { articletType, pageIndex });
        this.getArticles(payload);
    }
    render(): JSX.Element {
        const { getFieldDecorator } = this.props.form;
        const { loading } = this.props;
        const { article, articles: { totalCount, items }, articleSearchs: { pageIndex, pageSize, keywords, articletType } } = this.props.article;
        const pageChange = (pageIndex, pageSize) => {
            let payload = Object.assign({},
                this.props.article.articleSearchs,
                { pageIndex, pageSize });
            this.getArticles(payload);
        }
        const pagination: PaginationProps | boolean = {
            total: totalCount,
            defaultCurrent: 1,
            current: pageIndex,
            pageSize: pageSize,
            showSizeChanger: true,
            showTotal: (total) => `共 ${total} 条`,
            showQuickJumper: true,
            pageSizeOptions: ["10", "20", "30", "50"],
            onShowSizeChange: pageChange,
            onChange: pageChange
        };
        return (
            <Row className={Styles.F_BG_WHITE1}>
                <Row className={Styles.F_BG_WHITE}>
                    <Col span={24}>
                        <Form layout="inline">
                        <Form.Item>
                                <Button size={size} onClick={this.edit}>新增</Button>
                            </Form.Item>
                            <Form.Item label=' 文章名称'>
                                {getFieldDecorator("keywords", {
                                    initialValue: keywords
                                })(<Input
                                    style={{ width: 200 }}
                                    size={size}
                                    placeholder="输入关键字"
                                />)}
                            </Form.Item>
                            <Form.Item label='文章类型'>
                                {getFieldDecorator('articletType', {
                                    initialValue: articletType
                                })(<Select style={{ width: 120 }} onChange={this.OnArticletChange}>
                                    <Select.Option value=''>全部</Select.Option>
                                    <Select.Option value={1}>平台咨询</Select.Option>
                                    <Select.Option value={2}>帮助中心</Select.Option>
                                    <Select.Option value={3}>关于我们</Select.Option>
                                    <Select.Option value={4}>砍价玩法</Select.Option>
                                    <Select.Option value={5}>团购玩法</Select.Option>
                                    <Select.Option value={6}>隐私政策</Select.Option>
                                    <Select.Option value={7}>种树服务协议</Select.Option>
                                    <Select.Option value={8}>种树用户协议</Select.Option>
                                    <Select.Option value={9}>分红收益规则</Select.Option>
                                    <Select.Option value={10}>分享收益规则</Select.Option>
                                    <Select.Option value={11}>全民收益规则</Select.Option>
                                    <Select.Option value={12}>活动规则</Select.Option>
                                </Select>)}
                            </Form.Item>
                            <Form.Item>
                                <Button size={size} type="primary" loading={loading} onClick={this.search}>查询</Button>
                            </Form.Item>
                        </Form>
                        <Col span={24}>
                            <hr className={Styles.hrBorder} />
                            <h3>文章数据列表(共 {totalCount} 条)</h3>
                        </Col>
                        <Col span={24}>
                            <Table
                                dataSource={items}
                                bordered
                                pagination={pagination}
                                rowKey={(record: api.SingleUserMallArticleVOArticlesVO) => String(record.id)}
                                loading={loading}
                            >
                                <Table.Column title="序号" key="no" render={(text, record, index) => {
                                    return (pageIndex - 1) * pageSize + index + 1
                                }} />
                                <Table.Column title="文章标题" key="title" dataIndex="title" />
                                <Table.Column title="封面图片" key="picture" render={(text, record: api.SingleUserMallArticleVOArticlesVO, index) => {
                                    return <img width='100px' src={record.picture} />
                                }} />
                                {/* <Table.Column title="内容" key="content" dataIndex="content" /> */}
                                <Table.Column title="文章类型" key="displayType" render={(text, record: api.SingleUserMallArticleVOArticlesVO, index) => {
                                    return Number(record.articleType) == 1 ? '平台咨询' : Number(record.articleType) == 2 ? '帮助中心' :
                                     Number(record.articleType) == 3 ? '关于我们' :   Number(record.articleType) == 4 ? '砍价玩法'
                                    :Number(record.articleType) == 5 ? '团购玩法' :   Number(record.articleType) == 6 ? '隐私政策'
                                  : Number(record.articleType) == 7 ? '种树服务协议' :   Number(record.articleType) == 8 ? '种树用户协议'
                                  : Number(record.articleType) == 9 ? '分红收益规则' :   Number(record.articleType) == 10 ? '分享收益规则'
                                  :Number(record.articleType) == 11 ? '全民收益规则' :   Number(record.articleType) == 12 ? '活动规则' : ""
                                }} />
                                <Table.Column title="操作" render={(text, record: api.SingleUserMallArticleVOArticlesVO, index) => {
                                    return (
                                        <div>
                                            <a className={Styles.M_RIGHT} onClick={() => this.edit(record)}>
                                                编辑
                                            </a>
                                            <Popconfirm title="确定删除吗?" onConfirm={() => { this.remove(record.id); }}>
                                                <a>删除</a>
                                            </Popconfirm>
                                        </div>
                                    );
                                }} />
                            </Table>
                        </Col>
                    </Col>
                </Row>
                {
                    this.state.visible ? (<ArticlesEdit visible={this.state!.visible}
                        article={article}
                        onSave={this.save}
                        onCancel={this.setVisible} />) : (undefined)
                }
            </Row>)
    }
}
export default connect(({ article, loading: { models: { article: loading } } }) => ({ article, loading }))(Form.create()(Articles));
